import Pubsub from 'pubsub-js'
import request from '../../utils/request.js'
import moment from 'moment'
// pages/songDetail/songDetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isPlay: false, // 标记音乐是否播放
    songList: {}, // 歌曲详细信息
    musicId: "",// 存储歌曲id
    musicLink: "", // 存储音乐链接
    currentTime: '00:00',// 实时时间
    durationTime: '00:00', // 总时长
    currentWidth: 0, // 实时进度条的宽度
    currentLyric: "",//当前歌词对象
    lyric: [], //歌词
    lyricTime: 0,//歌词对应的时间
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    /* options 接受的是路由传过来的值 */
    let musicId = options.musicId
    this.setData({
      musicId,
    })
    // 调用 获取歌单详细信息
    this.getMusicInfo(musicId)
    // 调用 歌词
    this.getLyric(musicId);

    // 创建控制音乐播放的实例
    this.backgroundAudioManager = wx.getBackgroundAudioManager();
    // 监视音乐播放/暂停
    this.backgroundAudioManager.onPlay(() => {
      this.getIsPlay(true)
    });
    this.backgroundAudioManager.onPause(() => {
      this.getIsPlay(false)
    });
    this.backgroundAudioManager.onStop(() => {
      this.getIsPlay(false)
    })
    // 监听音乐实时播放的进度
    this.backgroundAudioManager.onTimeUpdate(() => {
      this.musicPlayTime()
    })

    // 监听音乐播放自然结束
    this.backgroundAudioManager.onEnded(() => {
      console.log("即将进入下一首")
      // 自动切换至下一首音乐，并且自动播放
      Pubsub.publish('switchType', 'next')

      // 将实时进度条的长度还原成0；时间还原成0；
      this.setData({
        currentWidth: 0,
        currentTime: '00:00',
        isPlay: false,
        lyric: [],
        currentLyric: "",
        lyricTime: 0,//歌词对应的时间
      })

      Pubsub.subscribe('musicId', (msg, musicId) => {
        // 获取歌曲
        this.getMusicInfo(musicId)
        // 获取歌词
        this.getLyric(musicId)
        // 自动播放当前音乐
        this.musicControl(true, musicId)
        Pubsub.unsubscribe('musicId')
      })
    })

    // 一进来就让音乐播放
    this.musicControl(true, musicId)
  },


  // 观察音乐播放进度
  musicPlayTime() {
    // 获取歌词对应时间
    let lyricTime = Math.ceil(this.backgroundAudioManager.currentTime)
    // 格式化实时的播放时间
    let currentTime = moment(this.backgroundAudioManager.currentTime * 1000).format("mm:ss")
    let currentWidth = (this.backgroundAudioManager.currentTime / this.backgroundAudioManager.duration) * 450;
    this.setData({
      currentTime,
      lyricTime,
      currentWidth
    })
    // 获取当前歌词
    this.getCurrentLyric()
  },

  // 修改isPlay的状态
  getIsPlay(isPlay) {
    this.setData({
      isPlay
    })
  },

  // 获取歌曲详情信息
  async getMusicInfo(musicId) {
    let result = await request("/song/detail", { ids: musicId })
    let durationTime = moment(result.songs[0].dt).format("mm:ss")
    this.setData({
      songList: result.songs[0],
      durationTime
    })

    // 动态修改窗口标题
    wx.setNavigationBarTitle({
      title: this.data.songList.name
    })
  },

  // 点击播放 / 暂停的回调
  handleMusicPlay() {
    let isPlay = !this.data.isPlay
    // 修改数据状态
    this.setData({
      isPlay
    })
    let { musicId, musicLink } = this.data;
    this.musicControl(isPlay, musicId, musicLink)
  },

  // 控制音乐播放/暂停的功能函数
  async musicControl(isPlay, musicId, musicLink) {

    if (isPlay) { // 音乐播放
      if (!musicLink) { // 第一次发请求
        let musicLinkData = await request('/song/url', { id: musicId })
        // 获取音乐链接
        musicLink = musicLinkData.data[0].url;
        // 更新音乐链接
        this.setData({
          musicLink
        })
      }
      this.backgroundAudioManager.src = musicLink; // 音频的数据源
      this.backgroundAudioManager.title = this.data.songList.name; // 音频标题，必填
    } else { // 音乐暂停
      this.backgroundAudioManager.pause(); // 暂停音乐
    }
  },

  // 点击切歌的回调
  handleSwitch(event) {

    // 获取切歌的类型
    let type = event.currentTarget.id;
    console.log(type)
    // 关闭当前播放的音乐
    this.backgroundAudioManager.stop();

    // 发布消息数据给recommendSong页面
    Pubsub.publish("switchType", type)

    Pubsub.subscribe('musicId', (msg, musicId) => {
      console.log(musicId)
      // 获取音乐详情信息
      this.getMusicInfo(musicId);
      // 获取音乐的歌词
      this.getLyric(musicId)
      // 自动播放当前音乐
      this.musicControl(true, musicId);
      // 取消订阅
      Pubsub.unsubscribe('musicId')
    })

  },

  //获取歌词
  async getLyric(musicId) {
    let lyricData = await request("/lyric", { id: musicId });
    let lyric = this.formatLyric(lyricData.lrc.lyric);
  },

  //传入初始歌词文本text
  formatLyric(text) {
    let result = [];
    let arr = text.split("\n"); //原歌词文本已经换好行了方便很多，我们直接通过换行符“\n”进行切割
    let row = arr.length; //获取歌词行数
    for (let i = 0; i < row; i++) {
      let temp_row = arr[i]; //现在每一行格式大概就是这样"[00:04.302][02:10.00]hello world";
      let temp_arr = temp_row.split("]");//我们可以通过“]”对时间和文本进行分离
      let text = temp_arr.pop(); //把歌词文本从数组中剔除出来，获取到歌词文本了！
      //再对剩下的歌词时间进行处理
      temp_arr.forEach(element => {
        let obj = {};
        let time_arr = element.substr(1, element.length - 1).split(":");//先把多余的“[”去掉，再分离出分、秒
        let s = parseInt(time_arr[0]) * 60 + Math.ceil(time_arr[1]); //把时间转换成与currentTime相同的类型，方便待会实现滚动效果
        obj.time = s;
        obj.text = text;
        result.push(obj); //每一行歌词对象存到组件的lyric歌词属性里
      });
    }
    result.sort(this.sortRule) //由于不同时间的相同歌词我们给排到一起了，所以这里要以时间顺序重新排列一下
    this.setData({
      lyric: result
    })
  },

  //控制歌词播放
  getCurrentLyric() {
    let j;
    for (j = 0; j < this.data.lyric.length - 1; j++) {
      if (this.data.lyricTime == this.data.lyric[j].time) {
        this.setData({
          currentLyric: this.data.lyric[j].text
        })
      }
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})